<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">广告管理</span>
  </div>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="广告名称" style="width: 220px;">
          <el-input placeholder="请输入广告名称"
                    v-model="searchAdvertisement.name"
                    @keydown.enter.prevent="loadAdvertisement">
          </el-input>
        </el-form-item>
        <el-form-item label="广告状态" style="width: 220px;">
          <el-select placeholder="请选择广告状态"
                     v-model="searchAdvertisement.status"
                     @keydown.enter.prevent="loadAdvertisement">
            <el-option label="已挂起" value="10"></el-option>
            <el-option label="已下架" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadAdvertisement">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        广告列表
        <el-button type="primary" style="float:right;margin-top: -3px;" @click="addAdvertisement">新增广告</el-button>
      </div>
      <div>
        <el-table :data="advertisementArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="广告名称" align="center"></el-table-column>
          <el-table-column prop="type" label="广告类型" align="center"></el-table-column>
          <el-table-column  prop="createTime" label="开始日期" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column  prop="endTime" label="结束日期" align="center"></el-table-column>
          <el-table-column  prop="clicks" label="点击次数" align="center"></el-table-column>
          <el-table-column prop="status" label="广告状态" align="center">
            <template #default="scope">
              <el-switch active-value="10" inactive-value="20"
                         v-model="scope.row.status"
                         @change="changeStatus(scope.row.id, scope.row.status)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column  prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editAdvertisement(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="delAdvertisement(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="广告名称">
          <el-input  placeholder="请输入广告名称" v-model="advertisement.name"></el-input>
        </el-form-item>
        <el-form-item label="广告类型">
          <el-input  placeholder="请输入广告类型" v-model="advertisement.type"></el-input>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-upload
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="imgDialogVisible">
            <img w-full :src="dialogImageUrl"/>
          </el-dialog>
        </el-form-item>
        <el-form-item label="广告链接">
          <el-input placeholder="请输入广告链接" v-model="advertisement.link"></el-input>
        </el-form-item>
        <el-form-item label="广告内容">
          <el-input placeholder="请输入广告内容" v-model="advertisement.content"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="advertisement.remark"></el-input>
        </el-form-item>
        <el-form-item label="广告状态">
          <el-select placeholder="请选择广告状态" v-model="advertisement.status">
            <el-option label="已挂起" value="10"></el-option>
            <el-option label="已下架" value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveAdvertisement">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const searchAdvertisement = ref({})
const advertisementArr = ref([])
const resetSearch = () => {
  searchAdvertisement.value = {}
  loadAdvertisement()
}
const loadAdvertisement = () => {
  axios.post(BASE_URL + '/v1/advertisement/select', searchAdvertisement.value)
      .then((response) => {
        if (response.data.code == 2000) {
          advertisementArr.value = response.data.data
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(() => loadAdvertisement())

const dialogTitle = ref('')
const imgDialogVisible = ref(false)
const advertisement = ref({})
const handleClose = () => {
  if (confirm("确定要关闭窗口吗?")) {
    dialogVisible.value = false
    fileList.value = []
    advertisement.value = {}
  }
}
const addAdvertisement = () => {
  dialogTitle.value = "新增广告"
  dialogVisible.value = true
  advertisement.value = {}
  fileList.value = []
}
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const actionUrl = ref(BASE_URL + '/v1/file/upload')
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  let imgUrl = uploadFile.response.data
  axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("删除成功")
        }
      })
}
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const editAdvertisement = (a) => {
  dialogTitle.value = "编辑广告";
  dialogVisible.value = true;
  advertisement.value = a;
}

const saveAdvertisement = () => {
  if(fileList.value.length==0){
    ElMessage.error("请上传图片")
    return
  }else {
    advertisement.value.image= fileList.value[0].response.data;
  }
  if (confirm("确定保存吗?")) {
    axios.post(BASE_URL + '/v1/advertisement/save', advertisement.value)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success("保存成功")
            dialogVisible.value = false
            advertisement.value = {}
            loadAdvertisement()
          } else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const changeStatus = (id, status) => {
  axios.post(BASE_URL + '/v1/advertisement/update/status/' + id + '/' + status)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("修改成功")
          loadAdvertisement()
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
const delAdvertisement = (id) => {
  if (confirm("确定删除吗?")) {
    axios.post(BASE_URL + '/v1/advertisement/delete/' + id)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success("删除成功")
            loadAdvertisement()
          } else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>

</style>
